<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstarp/css/bootstrap.min.css">
    <script src="./Ajax.js"></script>
    <script src="./获得Cookie方法.js"></script>
    <script src="./设置Cookie方法.js"></script>
</head>

<body>
    <h1>我是详情页</h1>
    <div class="container">
        <!-- <ol class="breadcrumb">
            <li><a href="#">详情</a></li>
        </ol>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object"
                        src="https://image5.suning.cn/uimg/b2c/newcatentries/0070081143-000000000144879464_2_800x800.jpg"
                        alt="...">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">诗绪刺绣改良旗袍连衣裙女夏装2020年新款中国风印花A字裙子52150
                </h4>
                <div class="price">
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>199.8</span>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">XL</button>
                    <button type="button" class="btn btn-default">L</button>
                    <button type="button" class="btn btn-default">M</button>
                    <button type="button" class="btn btn-default">S</button>
                    <button type="button" class="btn btn-default">XS</button>
                </div>

                <div>
                    <button class="btn btn-warning btn-lg">立即购买</button>
                    <button class="btn btn-danger btn-lg">查看购物车</button>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages</a></li>
        </ul>
        <div class="goods_detail">

        </div> -->
    </div>

    <script>
        // 判断url地址上面是否有id=value这个key和value
        if (!(/id=\d+/.test(location.href))) {
            location.href = "../html/6.2datils.html";
        }

        let cont = document.querySelector('.container');
        let id = location.search.split('=')[1];
        console.log(id);
        async function getDate() {
            let res = await pAjax({
                url: '../6.1xiang.php',
                type: 'get',
                data: {
                    id
                }
            });
            res = JSON.parse(res);
            // console.log(res);
            Runder(res.list);
        }
        getDate();

        cont.onclick = function (e) {
            if (!(e.target.id == 'buy' || e.target.id == 'shopping')) {
                return;
            }
            let login = getCookie('login');
            if (!login) {
                let flag = confirm("还没有登录，是否跳转到登录界面");
                if (flag) {
                    /* 
                      localStorage是浏览器自带的类似Cooike的东西 用来存储
                      和Cooike的区别：
                          【1】Cooike可以前后端的来回跑 设置，但是localStorage只能在浏览器中，不可以来回跑
                          【2】Cooike可以前后端都设置，但localStorage只能在前端设置
                          【3】Cooike存储的是普通字符，但localStorage 能存储普通的字符 和 JOSN数据类型的字符串（所有要拿取localStorage的时候要转化为js类型，存储的时候要转化为Json类型）
                          【4】Cooike的实效是会话级， 但localStorage默认是永久时效（除非自己删除）
                      localStorage的操作：
                          【1】localStorage.getItem（'你要获取的key值'）；
                          【2】localStorage.setItem（'key'，'value'）；
                          【3】localStorage.removeItem（'你要删除的key'）；
                          【4】localStorage.clear（）；清空所有的key
                    
                    */
                    //    如果要跳转，先把跳转之前的地址存储，以方便到时候登录完之后就跳转到该页面
                    localStorage.setItem('url', location.href);
                    // 存储完之后，就跳转到登录页面
                    location.href = './6.5login.htm';
                }
                return;
            }

            if (e.target.id == 'buy') {
                location.href = './6.6give.html';
            }
            if (e.target.id == 'shopping') {

                addCar(login);
            }
        }

        async function addCar(login) {
            let p = await pAjax({
                url: '../6.2addCar.php',
                type: 'post',
                data: {
                    username: login,
                    goods_id: id,
                },
            });
            p = JSON.parse(p);
            if (p.code) {
                let flag = confirm('是否跳转到购物车');
                flag ? location.href = './6.4car.html' : location.href;
            }
        }


        function Runder(data) {
            let str = '';
            str += `
            <ol class="breadcrumb">
            <li><a href="#">详情</a></li>
        </ol>
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object"
                        src="${data.goods_small_logo}"
                        alt="...">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">${data.goods_name}
                </h4>
                <div class="price">
                    <i class="glyphicon glyphicon-yen"></i>
                    <span>${data.goods_price}</span>
                </div>
                <div class="btn-group" role="group" aria-label="...">
                    <button type="button" class="btn btn-default">XL</button>
                    <button type="button" class="btn btn-default">L</button>
                    <button type="button" class="btn btn-default">M</button>
                    <button type="button" class="btn btn-default">S</button>
                    <button type="button" class="btn btn-default">XS</button>
                </div>

                <div>
                    <button class="btn btn-warning btn-lg" id="buy">立即购买</button>
                    <button class="btn btn-danger btn-lg" id="shopping" idx='${data.goods_id}'>查看/加入购物车</button>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#">Home</a></li>
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">Messages</a></li>
        </ul>
        <div class="goods_detail">
            ${data.goods_introduce}
        </div>
            `;
            cont.innerHTML = str;
        }
    </script>
</body>

</html>